<template>
    <Maptalks :mapOnLoadCB="mapOnLoadCB"></Maptalks>
    <div class="pane">
        <p @click="play">Play</p><br/>
        <p @click="pause">Pause</p><br/>
        <p @click="cancel">Cancel</p><br/>
        <p @click="finish">Finish</p><br/>
    </div>
</template>

<script>
import Maptalks from "@/components/common/Maptalks.component.vue"
import MapLayerConst from "@/const/MapLayerConst"
import {route, routeList} from "@/data/route"

export default {
    name: "AddRoutePlayMulti.component",
    components: {Maptalks},
    setup() {

        const play = () => {
            for (let index = 0; index < routeList.length; index++) {
                routeList[index].player.play();
            }
        }

        const pause = () => {
            for (let index = 0; index < routeList.length; index++) {
                routeList[index].player.pause();
            }
        }

        const finish = () => {
            for (let index = 0; index < routeList.length; index++) {
                routeList[index].player.finish();
            }
        }

        const cancel = () => {
            for (let index = 0; index < routeList.length; index++) {
                routeList[index].player.cancel();
            }
        }


        let mapOnLoadCB = (map) => {
            map.setZoom(14)

            for (let index = 0; index < routeList.length; index++) {
                if (!routeList[index].player) {
                    routeList[index].player = new maptalks.RoutePlayer(routeList[index], map, {
                        unitTime: 500,
                        maxTrailLine: 10,
                    });
                }
            }

            play();
        }

        return {
            mapOnLoadCB, play, pause, finish, cancel
        }
    }
}
</script>

<style scoped lang="less">
.pane {
    background: #34495e;
    line-height: 28px;
    color: #fff;
    z-index: 10;
    position: absolute;
    top: 20px;
    right: 20px;
    p {
        cursor: pointer;
        display: block;
        color: #fff;
        text-align: left;
        padding: 0 10px;
        min-width: 28px;
        min-height: 28px;
        float: left
    }
}

</style>
